<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        {{num}}
        <!-- v-on:  @ -->
        <!-- 不带参数时，不需要括号 -->
        <!-- 事件源 -->
        <div @click.self="onCount" style="background-color: red;">
            <!-- 会有 冒泡（从内向外的一种自发行为） 捕获（从外向内） -->
            <!-- 阻止冒泡：
                方法1：通过事件对象中的 event.stopPropagation() 方法阻止
                方法不带参数时，会自动传入一个事件对象e;
                方法2: click.stop(推荐)
                方法3: click.self
            -->
            <button @click="onCount">点击</button>
        </div>


        <!-- 阻止默认行为 一般用于链接的跳转和表单提交 -->
        <a href="https://www.4399.com" @click.prevent>好玩的网站</a>

        <!-- 两数相加 -->
        <!-- 如果方法中带了参数，那么事件对象就会消失,
            如果还需要用到事件对象，必须在所有参数末尾显示添加:  $event
        -->
       
            <button @click="onAdd(12,13,$event)">=</button>
 
        <span>{{num3}}</span>


    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    num:0,
                    num3: 0
                }
            },
            //methods:存放事件处理时的方法，
            methods: {
                onAdd(n1, n2, e) {
                    // e.stopPropagation();
                    console.log("点击了");
                    this.num3 = n1 + n2
                },
                onCount(event) {

                    // event.stopPropagation();

                    //组合式api中没有this指向问题
                    this.num++;
                    //在一个方法中调用另一个方法，也需要加this
                    // this.onAdd();
                }
            },
        }).mount('#div');
    </script>

</body>

</html>